<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FinData - 量化回测</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #0a0a0a;
            color: #e0e0e0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 30px;
            background-color: #121212;
            border-bottom: 1px solid #333;
            z-index: 10;
        }
        
        .logo-container {
            display: flex;
            align-items: center;
        }
        
        .logo {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            filter: drop-shadow(0 0 5px rgba(138, 43, 226, 0.7));
            animation: pulse 2s infinite alternate;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(90deg, #8a2be2, #a855f7, #c084fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
            animation: shine 3s linear infinite;
            margin-right: auto;
            padding-left: 15px;
        }
        
        .page-title {
            font-size: 18px;
            font-weight: bold;
            color: #e0e0e0;
            margin-right: 20px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .username {
            margin-right: 15px;
            color: #a855f7;
        }
        
        .logout-btn {
            padding: 8px 16px;
            background: linear-gradient(45deg, #8a2be2, #4b0082);
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .logout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
        }
        
        .iframe-container {
            flex: 1;
            position: relative;
            overflow: hidden;
            border: none;
        }
        
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .loading-text {
            font-size: 1.2rem;
            margin-top: 20px;
            color: #a855f7;
        }
        
        .spinner {
            display: inline-block;
            width: 50px;
            height: 50px;
            border: 3px solid rgba(168, 85, 247, 0.3);
            border-radius: 50%;
            border-top-color: #a855f7;
            animation: spin 1s ease-in-out infinite;
        }
        
        .home-link {
            margin-right: 20px;
            padding: 8px 16px;
            background: rgba(18, 18, 18, 0.7);
            border-radius: 5px;
            color: #e0e0e0;
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }
        
        .home-link:hover {
            background: rgba(138, 43, 226, 0.3);
            transform: translateY(-2px);
        }
        
        .home-icon {
            margin-right: 5px;
            width: 16px;
            height: 16px;
        }

        .error-container {
            text-align: center;
            padding: 20px;
            background-color: rgba(255, 0, 0, 0.1);
            border-radius: 8px;
            margin-top: 20px;
        }

        .error-title {
            font-size: 18px;
            color: #ff6b6b;
            margin-bottom: 10px;
        }

        .error-message {
            color: #e0e0e0;
            margin-bottom: 15px;
        }

        .action-btn {
            padding: 8px 16px;
            background: #8a2be2;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            margin: 5px;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(1.1);
                opacity: 1;
                filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.9));
            }
        }
        
        @keyframes shine {
            to {
                background-position: 200% center;
            }
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo-container">
            <svg class="logo" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 0 L40 20 L20 40 L0 20 Z" fill="#8a2be2"/>
                <path d="M10 10 L30 10 L30 30 L10 30 Z" fill="#00bfff"/>
                <path d="M15 15 L25 15 L25 25 L15 25 Z" fill="#4CAF50"/>
            </svg>
            <div class="logo-text">FinData</div>
        </div>
        
        <div class="page-title">量化回测平台</div>
        
        <a href="/dashboard" class="home-link">
            <svg class="home-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M9 22V12H15V22" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            返回首页
        </a>
        
        <div class="user-info">
            <div class="username" id="username-display">加载中...</div>
            <button class="logout-btn" onclick="logout()">登出</button>
        </div>
    </div>
    
    <div class="iframe-container">
        <iframe id="backtest-frame" frameborder="0"></iframe>
        <div class="loading" id="loading-indicator">
            <div class="spinner"></div>
            <div class="loading-text">正在加载回测平台...</div>
        </div>
    </div>

    <script>
        // 简单的日志函数
        function log(message) {
            console.log(`[回测平台] ${message}`);
        }

        // 获取用户信息并加载iframe
        async function loadBacktestPlatform() {
            try {
                // 显示加载指示器
                document.getElementById('loading-indicator').style.display = 'block';
                log('正在获取用户信息...');

                // 获取用户信息
                const response = await fetch('/api/user-info');
                if (!response.ok) {
                    // 未登录，重定向到登录页面
                    window.location.href = '/login';
                    return;
                }

                // 解析用户信息
                const userData = await response.json();
                document.getElementById('username-display').textContent = userData.username || '未知用户';
                log(`获取到用户信息: ${JSON.stringify(userData)}`);

                // 将用户ID直接写入localStorage
                if (userData.UserId) {
                    localStorage.setItem('userid', userData.UserId);
                    log(`已将用户ID存储到localStorage: ${userData.UserId}`);

                    // 加载回测平台，不再通过URL参数传递user_id
                    const iframeUrl = `http://localhost:8080/factor/`;
                    log(`加载回测平台: ${iframeUrl}`);
                    
                    const iframe = document.getElementById('backtest-frame');
                    iframe.src = iframeUrl;

                    // 监听iframe加载完成
                    iframe.onload = function() {
                        log('回测平台加载完成');
                        document.getElementById('loading-indicator').style.display = 'none';
                    };

                    // 设置加载超时
                    setTimeout(() => {
                        if (document.getElementById('loading-indicator').style.display !== 'none') {
                            log('加载超时，隐藏加载指示器');
                            document.getElementById('loading-indicator').style.display = 'none';
                            
                            // 显示错误信息和打开新标签页的选项
                            showError('回测平台加载超时', '请尝试在新标签页中打开回测平台');
                        }
                    }, 10000);
                } else {
                    log('未获取到用户ID');
                    document.getElementById('loading-indicator').style.display = 'none';
                    showError('用户信息错误', '未能获取用户ID，请重新登录');
                }
            } catch (error) {
                log(`加载失败: ${error.message}`);
                document.getElementById('loading-indicator').style.display = 'none';
                showError('加载失败', '无法获取用户信息或加载回测平台');
            }
        }

        // 显示错误信息
        function showError(title, message) {
            // 创建错误容器
            const errorContainer = document.createElement('div');
            errorContainer.className = 'error-container';
            errorContainer.innerHTML = `
                <div class="error-title">${title}</div>
                <div class="error-message">${message}</div>
                <button class="action-btn" onclick="openInNewTab()">在新标签页中打开</button>
                <button class="action-btn" onclick="retryLoading()">重试加载</button>
            `;

            // 添加到iframe容器中
            const iframeContainer = document.querySelector('.iframe-container');
            iframeContainer.appendChild(errorContainer);
        }

        // 在新标签页中打开回测平台
        function openInNewTab() {
            const userId = localStorage.getItem('userid');
            const url = `http://localhost:8080/factor/`;
            
            log(`在新标签页中打开: ${url}`);
            window.open(url, '_blank');
        }

        // 重试加载
        function retryLoading() {
            log('重试加载回测平台');
            
            // 移除可能存在的错误容器
            const errorContainer = document.querySelector('.error-container');
            if (errorContainer) {
                errorContainer.remove();
            }
            
            // 重新加载
            loadBacktestPlatform();
        }

        // 登出函数
        async function logout() {
            try {
                // 清除localStorage中的用户ID
                localStorage.removeItem('userid');
                log('已清除localStorage中的用户ID');
                
                const response = await fetch('/api/logout', { method: 'POST' });
                if (response.ok) {
                    const data = await response.json();
                    window.location.href = data.redirect || '/blank';
                }
            } catch (error) {
                log(`登出失败: ${error.message}`);
            }
        }

        // 页面加载时启动
        window.addEventListener('DOMContentLoaded', loadBacktestPlatform);
    </script>
</body>
</html> 